<template>
  <div class="system-param-setting">
    <div class="left-menu">
      <!-- 左侧菜单，显示系统参数类型 -->
      <el-menu
        :default-active="activeParamType"
        mode="vertical"
        @select="handleParamTypeChange"
      >
        <el-menu-item
          v-for="paramType in paramTypes"
          :key="paramType.id"
          :index="paramType.id"
        >
          {{ paramType.name }}
          <!-- 删除参数类型按钮 -->
          <el-button
            size="mini"
            type="danger"
            @click.stop="deleteParamType(paramType.id)"
            >删除</el-button
          >
          <!-- 编辑参数类型按钮 -->
          <el-button
            size="mini"
            type="primary"
            @click.stop="editParamType(paramType)"
            >编辑</el-button
          >
        </el-menu-item>
      </el-menu>
      <!-- 添加参数类型按钮 -->
      <el-button type="primary" @click="showAddParamTypeDialog = true"
        >添加参数类型</el-button
      >
    </div>
    <!-- 添加/编辑参数类型对话框 -->
    <el-dialog :visible.sync="showAddParamTypeDialog" title="添加/编辑参数类型">
      <el-form :model="newParamType">
        <el-form-item label="名称">
          <el-input v-model="newParamType.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddParamTypeDialog = false">取消</el-button>
        <el-button type="primary" @click="saveParamType">保存</el-button>
      </div>
    </el-dialog>
    <!-- 参数表单 -->
    <div class="form-fields">
      <el-form :model="newFormField">
        <el-form-item
          v-for="field in currentFormFields"
          :key="field.key"
          :label="field.label"
        >
          <el-input v-model="field.value"></el-input>
          <el-button
            size="mini"
            type="danger"
            @click.stop="deleteFormField(field.key)"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click.stop="editFormField(field)"
            >编辑</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 添加表单项按钮 -->
      <el-button type="primary" @click="showAddFormFieldDialog = true"
        >添加表单项</el-button
      >
    </div>
    <!-- 添加/编辑表单项对话框 -->
    <el-dialog :visible.sync="showAddFormFieldDialog" title="添加/编辑表单项">
      <el-form :model="newFormField">
        <el-form-item label="键">
          <el-input v-model="newFormField.key"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="newFormField.label"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="newFormField.type">
            <el-option label="输入框" value="input"></el-option>
            <el-option label="选择框" value="select"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项" v-if="newFormField.type === 'select'">
          <el-input v-model="newFormField.optionsStr"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddFormFieldDialog = false">取消</el-button>
        <el-button type="primary" @click="saveFormField">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      newParamType: { id: "", name: "" },
      showAddParamTypeDialog: false,
      showAddFormFieldDialog: false,
      newFormField: { key: "", label: "", type: "input", optionsStr: "" },
      activeParamType: "",
      currentFormFields: [],
      paramTypes: [],
    };
  },
  methods: {
    async fetchParamTypes() {
      try {
        const response = await axios.get("/api/paramTypes");
        this.paramTypes = response.data;
        this.activeParamType = this.paramTypes[0]?.id || "";
        this.fetchFormFields(this.activeParamType);
      } catch (error) {
        console.error("Failed to fetch param types:", error);
      }
    },
    async fetchFormFields(paramType) {
      try {
        const response = await axios.get(
          `/api/formFields?paramType=${paramType}`
        );
        this.currentFormFields = response.data;
      } catch (error) {
        console.error("Failed to fetch form fields:", error);
      }
    },
    handleParamTypeChange(paramType) {
      this.activeParamType = paramType;
      this.fetchFormFields(paramType);
    },
    async saveParamType() {
      try {
        if (this.newParamType.id) {
          await axios.put(
            `/api/paramTypes/${this.newParamType.id}`,
            this.newParamType
          );
        } else {
          await axios.post("/api/paramTypes", this.newParamType);
        }
        this.showAddParamTypeDialog = false;
        this.newParamType = { id: "", name: "" };
        this.fetchParamTypes();
      } catch (error) {
        console.error("Failed to save param type:", error);
      }
    },
    editParamType(paramType) {
      this.newParamType = { ...paramType };
      this.showAddParamTypeDialog = true;
    },
    async deleteParamType(paramTypeId) {
      try {
        await axios.delete(`/api/paramTypes/${paramTypeId}`);
        this.fetchParamTypes();
      } catch (error) {
        console.error("Failed to delete param type:", error);
      }
    },
    async saveFormField() {
      try {
        if (this.newFormField.key) {
          await axios.put(`/api/formFields/${this.newFormField.key}`, {
            paramType: this.activeParamType,
            ...this.newFormField,
          });
        } else {
          await axios.post("/api/formFields", {
            paramType: this.activeParamType,
            ...this.newFormField,
          });
        }
        this.showAddFormFieldDialog = false;
        this.newFormField = {
          key: "",
          label: "",
          type: "input",
          optionsStr: "",
        };
        this.fetchFormFields(this.activeParamType);
      } catch (error) {
        console.error("Failed to save form field:", error);
      }
    },
    editFormField(field) {
      this.newFormField = { ...field };
      this.showAddFormFieldDialog = true;
    },
    async deleteFormField(fieldKey) {
      try {
        await axios.delete(`/api/formFields/${fieldKey}`, {
          data: { paramType: this.activeParamType },
        });
        this.fetchFormFields(this.activeParamType);
      } catch (error) {
        console.error("Failed to delete form field:", error);
      }
    },
  },
  created() {
    this.fetchParamTypes();
  },
};
</script>

<style scoped>
.system-param-setting {
  display: flex;
  height: 100vh;
}
.left-menu {
  width: 200px;
  border-right: 1px solid #e6e6e6;
  padding: 10px;
}
.right-form {
  flex: 1;
  padding: 20px;
}
</style>
